<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>NeptuneShop</title>
<link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body style="background:#F5F5F5">
<form class="layui-form">
<div class="layui-container"> 
  <div class="layui-row">
    <!-- logo区域 -->
    <div class="layui-col-md3">  
		  	<div class="layui-card" style="height:200px;">
		  		<img src="../image/logo/white_logo.svg" alt="图不见咯" height="190px" width="250px">
		  	</div>	 				 		  			    							 				  			    	 			        		        	          		 
    </div>
    <!-- 轮播区域 -->
    <div class="layui-col-md6">    
	  	<div class="layui-carousel" id="shop_carousel">
		  <div carousel-item align="center">
		    <div>
				<img src="../image/carousel/1528084978838818.jpg" alt="图不见咯" height="200px" width="450px"/>
			</div>
		    <div>
		    	<img src="../image/carousel/016772554434e80000019ae9189613.jpg" alt="图不见咯" height="200px" width="450px"/>
			</div>
		    <div>
				<img src="../image//carousel/6a90424e9a09b88a41165e2e7c0321d6.jpg" alt="图不见咯" height="200px" width="450px"/>
			</div>
		    <div>
				<img src="../image/carousel/2164229_000211669413_2.jpg" alt="图不见咯" height="200px" width="450px"/>
			</div>
		    <div>
				<img src="../image/carousel/v2-7955479586fc2848bf962c2ac6acf173_r.jpg" alt="图不见咯" height="200px" width="450px"/>
			</div>
		  </div>
		</div>
    </div>
    <!-- 个人信息区域 -->
    <div class="layui-col-md3" align="center">
    	<div class="layui-card" style="height:200px;">
		  <div class="layui-card-header">个人信息</div>
		  <div class="layui-card-body">
			    <div style="width: 100px;height: 100px; border-radius:50px;overflow: hidden;border:2px solid #E6E6FA;">
	      			<img id="user_img" src="../image/head/01f1bd5d19f28ba8012076404361ce.jpg@1280w_1l_2o_100sh.jpg" alt="" width="100px" height="100px">
	      			<input type="hidden" id="userid" name="userid" th:value="${session.id}">
	      		</div>     
	          	<a href="##" id="user_name">Hi! 你好</a>	          	          
		  </div>
		</div>                
    </div>
  </div>
  <div class="layui-row">
  	<!-- 导航区域 -->
  	<div class="layui-col-md3" style="height:400px;">
  		<div class="layui-card" style="height:400px;">
		  <div class="layui-card-header" align="center">主题商品</div> 
		  <div class="layui-card-body"  align="center" >
			 <select name="goodsTypeSelect" id="goodsTypeSelect" class="select" lay-filter="goodsTypeSelect">
        		<option value="">商品类型</option>    
        		<option value="所有">所有</option>       
      		 </select>
		</div>  		
    </div>
    </div>
  	<!-- 表格区域 -->
    <div class="layui-col-md6" style="height:400px;"> 
    	<input type="hidden" id="userId" th:value="${session.id}">    
	  	<table id="shop_dataTable" lay-filter="shop_dataTable"></table>
	  	<script id="shop_tableTool" type="text/html">
			<input type="button" id="buy" value="购买" class="layui-btn layui-btn-xs layui-btn-danger" lay-event="buy">  		
	  	</script>
	  	<div id="shop_pageBox" align="center"></div>	  
    </div>
    <!-- 购物车显示区域 -->
    <div class="layui-col-md3" style="height:400px;">
    	 <div class="layui-card" style="height:400px;">
		  <div class="layui-card-header" align="center">传送门</div> 
		  <div class="layui-card-body" align="center" >
			  <div id="jumpDiv"></div>
		  <script type="text/html" id="jumpScript">
		  {{# if(d.status==1) {}}
		      <div class="layui-form-item">			  	
			  		<a class="layui-btn layui-btn-warm" href="/user/index" id="index" style="font-size:20px;width:100%;height:18%;"><i class="layui-icon layui-icon layui-icon-home"></i>首页</a>			  	
			  </div>
			  <div class="layui-form-item">			    
			    	<a class="layui-btn layui-btn-normal" href="/orderCourse/index" id="orderCourse" style="font-size:20px;width:100%;height:18%;"><i class="layui-icon layui-icon-dialogue"></i>会员约课</a>			    
			  </div>
			  <div class="layui-form-item">			    
					<a id="toCart" href="/orderCourse/toOrderList" class="layui-btn" style="font-size:20px;height:18%;width:100%;"><i class="layui-icon layui-icon layui-icon-cart"></i>我的预约</a>						 				  			    	 			        		        	          
		  	  </div>
		  {{# } else if(d.status==0){}}
			  <div class="layui-form-item">			  	
			  		<a class="layui-btn layui-btn-disabled" disabled id="index" style="font-size:20px;width:100%;height:18%;"><i class="layui-icon layui-icon layui-icon-home"></i>首页</a>			  	
			  </div>
			  <div class="layui-form-item">			    
			    	<a class="layui-btn layui-btn-disabled" disabled style="font-size:20px;width:100%;height:18%;"><i class="layui-icon layui-icon-dialogue"></i>会员约课</a>			    
			  </div>
			  
			  <div class="layui-form-item">			    
					<a class="layui-btn layui-btn-disabled" disabled style="font-size:20px;height:18%;width:100%;"><i class="layui-icon layui-icon layui-icon-cart"></i>我的预约</a>						 				  			    	 			        		        	          
		  	  </div>
	 	  {{#}}}
			  <div class="layui-form-item">				  	
			  		<a class="layui-btn layui-btn-danger" href="/shop/index" id="shop" style="font-size:20px;width:100%;height:18%;"><i class="layui-icon layui-icon layui-icon-cart-simple"></i>网上商城</a>			  	
			  </div>
			  <div class="layui-form-item">			    
					<a class="layui-btn" href="/private_course_management" id="privateCourse" style="font-size:20px;width:100%;height:18%;"><i class="layui-icon layui-icon-diamond"></i>私教服务</a>					
		      </div>			  		
	 		  			    				
		      <div class="layui-form-item">			    
					<a id="toCart" href="/cart/selectDetailById" class="layui-btn layui-btn-danger" style="font-size:20px;height:18%;width:100%;"><i class="layui-icon layui-icon layui-icon-cart"></i>我的购物车</a>						 				  			    	 			        		        	          
		  	  </div>
		  	  <div class="layui-form-item">			    
					<a id="toCart" href="/myOrder/index" class="layui-btn layui-btn-normal" style="font-size:20px;height:18%;width:100%;"><i class="layui-icon layui-icon layui-icon-cart"></i>我的订单</a>						 				  			    	 			        		        	          
		  	  </div>
		  </script>
		</div>  		
    </div>
  </div>
 </div>
 </div>
 </form>
<script src="../layui/layui.js"></script>
<script src="../js/user.js"></script>
<script type="text/javascript">
layui.use(['layer','jquery','form','laytpl','laypage','table','element','carousel'],function(){
	var layer=layui.layer;
	var $=layui.jquery;
	var form=layui.form;
	var laypage=layui.laypage;
	var table=layui.table;						
	var element=layui.element;	
	var carousel=layui.carousel;
	var laytpl=layui.laytpl;
	var userId=$("#userId").val();
		
		$(function(){
			if(parseInt(userId)>100000 && parseInt(parseInt(userId)/100000)==1){			
				var status=1;
				console.log(userId);
			}
			else{
				var status=0;
			}
			var jumpScript=document.getElementById('jumpScript');
			var jumpData={
					"status":status
			}
			var jumpTpl=jumpScript.innerHTML;
			var jumpView=document.getElementById('jumpDiv');
			laytpl(jumpTpl).render(jumpData,function(html){
				jumpView.innerHTML = html;
			});
		})
	
	$.ajax({					//为头像和用户名赋值
		url:'/user/get_user',
		//dataType:'json',
		type:'get',			
		success:function(data){
			document.getElementById("user_img").src=data.image;
			document.getElementById("user_name").innerHTML=data.name;
		}
	});
	
	//商品左侧导购栏
	$(document).ready(function(){
		$.ajax({
			type:'get'
			,url:'../goodsType/getTypeList'
			,success:function(data){
				$.each(data,function(index,goods){
					$('#goodsTypeSelect').append(new Option(goods.goodsTypeName));
				});
				form.render("select");
			}
		});	
	});
	//真分页
	$(function(){
		var url='/shop/selectShopBtween'
		var goodsType=null;
		getData(0,goodsType,url);
	})
	function getData(pageStart,goodsType,url){
			table.render({
				elem:'#shop_dataTable'
				,url:url
				,method:"get"
				,where:{
					goodsType:goodsType,
					pageStart:pageStart,
					pageSize:10
				}
				,parseData:function(res){				
					console.log(res)
					return{
						"code":0
						,"msg":""
						,"count":res.rowSize
						,"data":res.data
						,"curr":res.pageStart
						,"limit":res.limit
					}
				}
				//,cellMinWidth:100
				,cols:[
			    		[	
			    		  {field:'goodsId', title:'商品编号', width:180,hide:true}
					      ,{field:'goodsName', title:'商品名称', width:160}
					      ,{field:'goodsType', title:'类型', width:80}
					      ,{field:'goodsPrice', title:'单价', width:112, sort: true }			      
					      ,{field:'goodsStockNumber', title:'库存', width:112, sort: true }					     
					      ,{fixed: 'right', title:'操作', width:100, align:'center', toolbar: '#shop_tableTool'}
			   			]
			    	]
				,done:function(res,curr,count){
					console.log(res);
					laypage.render({
						elem:'shop_pageBox'
						,count:res.count
						,limit:res.limit
						,layout: ['count','prev','page','next','skip']
						,curr:res.curr/10+1
						,jump:function(obj,first){//触发分页后的回调
							if(!first){//点击跳转触发函数自身，并传递当前页：obj.curr							
								res.pageStart=obj.limit*(obj.curr-1);
								console.log(res.pageStart);
								getData(res.pageStart,goodsType,url);														
							}//if
						}//jump function
					});
					$(document).ready(function(){							
						$("table tr td").find("div").each(function(){//遍历页面table中的div							
							if($(this).html()==="0"){ //如果值为0
								$(this).css("color","red");
								$(this).html("售罄");
							}
								
						});
					});
				}
			});
	}//function
	
	table.on('tool(shop_dataTable)', function(obj){ //注：tool 是工具条事件名，goods_toolBox 是 table 原始容器的属性 lay-filter="对应的值"
		var data = obj.data //获得当前行数据
	    ,layEvent = obj.event; //获得 lay-event 对应的值
	    if(layEvent === 'buy'){
	    	buy(data.goodsId);
	    } 	    
	});
	
	//轮播
	carousel.render({
	    elem: '#shop_carousel'
	    ,width: '570px' //设置容器宽度
	    ,height:'200px'
	    ,arrow: 'always' //始终显示箭头
	    ,interval:5000   //自动切换时间毫秒（ms）
	    //,anim: 'updown' //切换动画方式
	  });
	
	function buy(goodsId){
		layer.open({
			type:2
			,title:"商品购买"
			,content:'../shop/selectGoodsInfoById?id='+goodsId
			,area:['650px','460px']
			,end:function(){
				var url='/shop/selectShopBtween'
				var goodsType=null;
				getData(0,goodsType,url);
			}
		});
	}		
	//下拉框监听
	form.on('select(goodsTypeSelect)',function(data){
		var url='../shop/getGoodsByType';
		var goodsType=data.value;
		getData(0,goodsType,url);
		if(data.value==="所有"){
			var url='/shop/selectShopBtween'
			var goodsType=null;
			getData(0,goodsType,url);
		}
	});
	
	//进入购物车
	$(document).on('click','toCart',function(){
		
	});
});
</script>
</body>
</html>